import React, { useState } from 'react';
import './index.css';
import { Row, Col, Select, Button, Table, Modal, message, Input } from 'antd';
import 'antd/dist/antd.css';
import { connect } from 'react-redux';
import * as actions from '../store/action'

let comkey = ''; //模态框内容id
let boxs = {} //搜索关键字
let comnum = {}//模态框内容
const onSelectChange = (key) => {

    comkey = key[0]
};
function mapStateToPrpos(state, ownProps) {
    console.log(state)
    return {
        invoices: state.invoicess ? state.invoicess : state.invoices
    }
}
function mapFuncToPrpos(dispatch, ownProps) {
    return {
        getcorpage: (num) => { dispatch(actions.getcorpage(num)) },
        amendpage: (num) => dispatch(actions.amendpage(num))
    }
}
const rowSelection = {
    type: 'radio',
    onChange: onSelectChange,
};
const columns = [
    { title: '公司ID', dataIndex: 'key' },
    { title: '公司名称', dataIndex: 'comName' },
    { title: '客户名称', dataIndex: 'userName' },
    { title: '客户手机号', dataIndex: 'userphone' },
    { title: '普票是否预缴税金', dataIndex: 'tax' },
    { title: '金税盘位置', dataIndex: 'taxAddress' },
    { title: '发票章位置', dataIndex: 'taxAddressType' },
    { title: '剩余空白发票位置', dataIndex: 'residueTax' },
    { title: '公章位置', dataIndex: 'commonSeal' },
    { title: ' 服务状态 - 代理记账', dataIndex: 'account' },
    { title: ' 服务状态 - 开具发票', dataIndex: 'invoice' },
    { title: ' 服务状态 - 工商公示', dataIndex: 'publicity' },
    { title: '服务状态 - 汇算清缴', dataIndex: 'settle' },
    { title: '服务状态 - 代开专票', dataIndex: 'ticket' },
]

const Corbox = (prpos) => {
    const { invoices, getcorpage,amendpage } = prpos
    const { Option } = Select
    console.log(useState)
    // 模态框
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        if (comkey) {
            for (let i = 0; i < invoices.length; i++) {
                if (invoices[i].key == comkey) {
                    comnum = invoices[i]
                }
            }
            setIsModalOpen(true);
        } else {
            message.error('请选择修改公司');
        }


    };

    const handleOk = () => {
        // console.log(comnum)
        amendpage(comnum)
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    // 搜索
    const gitexID = (e) => {
        boxs.key = e.target.value
    }
    const gitexName = (e) => {
        boxs.comName = e.target.value
    }
    // 模态框
    // 公司名称：
    const getcomName = (e) => {
        comnum.comName = e.target.value
        e.target.value=''
    }
    // 公司联系人：
    const getuserName = (e) => {
        comnum.userName = e.target.value
        e.target.value=''
    }
    // 联系人电话：
    const getuserphone = (e) => {
        comnum.userphone = e.target.value
        e.target.value=''
    }
    
    // 公司位置：
    const getcommonSeal = (e) => {
        comnum.commonSeal = e.target.value
        e.target.value=''
        console.log(comnum)
    }
    return (
        <div className='corbox'>
            <div className='h1c4'>
                <h1 className='h1s'>欢迎使用捷税宝系统！</h1>
            </div>
            <h2><b>6.2公司开票系统</b></h2>
            <div>
                <Row className="rowbox">
                    <Col span={1}></Col>
                    <Col span={4}>公司ID：<input style={{ height: 30, }} onChange={gitexID}></input></Col>
                    <Col span={4}>公司名称：<input style={{ height: 30, }} onChange={gitexName}></input></Col>
                    <Col span={2}><span className='redspan'>*普票是否预缴税金</span></Col>
                    <Col span={3}>
                        <Select placeholder="未选择" style={{ width: '100%', }}>
                            <Option value="true">是</Option>
                            <Option value="flse">否</Option>
                        </Select>
                    </Col>
                    <Col span={3} push={7}>
                        <Button type='primary' onClick={() => {
                            // console.log(boxs)
                            getcorpage(boxs)
                        }}>查询</Button>
                    </Col>
                </Row>
                <Row className='editbox'>
                    <Col span={21}></Col>
                    <Col span={3}>
                        <Button type='primary' onClick={showModal}>编辑</Button>
                    </Col>
                </Row>
            </div>
            <div>
                <Table rowSelection={rowSelection} columns={columns} dataSource={invoices} pagination={{ pageSize: 5 }} />
            </div>
            <Modal title="修改基础信息" open={isModalOpen} onOk={handleOk } onCancel={handleCancel}>
                <h2>{comnum.comName}公司</h2>
                公司名称：<Input defaultValue={comnum.comName} onChange={getcomName}></Input>
                公司联系人：<Input defaultValue={comnum.userName} onChange={getuserName}></Input>
                联系人电话：<Input defaultValue={comnum.userphone} onChange={getuserphone}></Input>
                公司位置：<Input defaultValue={comnum.commonSeal} onChange={getcommonSeal}></Input>
            </Modal>
        </div>
    )
}
export default connect(mapStateToPrpos, mapFuncToPrpos)(Corbox);